&.promo {
	overflow: auto;

	header {
		height: auto;
		text-align: center;
		padding: 50px 0 20px;

		& + main.content {
			height: auto;
		}

		h2 {
			font-size: 85px;
			line-height: 150px;
		}

		.pricing {
			font-size: 36px;
			line-height: 40px;

			.yearly {
				display: block;
				font-size: 24px;
			}
		}

		button.upgrade {
			margin-top: 30px;
		}

		p.business {
			font-size: 14px;
			margin: 30px 0 0;
			line-height: 20px;

			a {
				color: inherit;
				line-height: 14px;
				display: inline-block;
				text-decoration: none;
				border-bottom: 1px dotted;
			}
		}
	}

	main.content {
		padding: 0;
		overflow: initial;
		max-height: initial;

		section {
			margin: 0;
			width: auto;
			font-size: 16px;
			background: none;
			box-shadow: none;
			line-height: 20px;
			position: relative;
			border-bottom: 1px solid rgba(0, 0, 0, .1);

			.content {
				display: flex;
				margin: 0 auto;
				max-width: 1200px;
				min-height: 500px;
				flex-direction: column;
				justify-content: center;

				@media (max-width: 1550px) {
					& {
						padding: 0 40px;
					}
				}
			}

			h3 {
				padding: 0;
				font-size: 36px;
				font-weight: 300;
				line-height: 48px;
				margin-bottom: 15px;
			}

			p {
				padding: 0;
				font-size: 22px;
				max-width: 350px;
				font-weight: 300;
				line-height: 1.5;
			}

			.media {
				top: 0;
				left: 50%;
				width: 50%;
				height: 100%;
				position: absolute;
				background: rgba(0, 0, 0, .03) left center/auto 100% no-repeat;
			}

			&.live-bgs {
				.content {
					text-align: right;
					align-items: flex-end;
				}

				.media {
					right: 50%;
					width: auto;
					left: initial;
				}
			}

			&.more {
				background: #FFF;

				.content {
					display: block;
					padding-top: 50px; // The padding shorthand can't be used here or the media query will get overridden
					min-height: initial;
					padding-bottom: 50px;
				}

				ul {
					padding-left: 24px;

					li {
						display: block;
						font-size: 20px;
						font-weight: 300;
						line-height: 36px;
					}
				}
			}

			&.get {
				.content {
					display: block;
					padding-top: 75px;
					min-height: 400px;
					text-align: center;
					padding-bottom: 75px;
				}

				h3 {
					margin-bottom: 35px;
				}
			}
		}
	}
}